<template>
    <main id="main" ref="main">
        <div class="input-div" v-if="type!==3" v-show="showFirst">
            <div class="fast" @click="changeType">
                <div v-if="type===1">快捷</div>
                <div v-else>自定</div>
                <div>祝福</div>
            </div>
            <input class="my-input" type="text" maxlength="18" v-model="input" placeholder="自定义祝福" v-if="type===1"/>
            <div class="fast-container" v-if="type===2">
                <div class="wish-item"
                     v-for="(item,index) in preWishes.slice(0,4)"
                     :key="index"
                     @click="postComment(item)"
                >
                    {{ item }}
                </div>
            </div>
            <div class="submit" @click="postComment(input)" v-if="type===1">发送弹幕</div>
        </div>
        <div v-else class="wrapper">
            <div class="next-stage" @click="toShare()">去分享</div>
        </div>
        <div class="fly-container" v-if="showFirst">
            <div class="single-fly" v-for="(item,index) in fakeWishes" :key="index"
                 :style="`animation-delay:${item.delay}s;top:${item.top}vw`">
                {{ item.value }}
            </div>
            <!-- 我发出的弹幕可以以特殊的颜色显示出来 -->
            <div v-if="myWish" 
                 class="single-fly"
                 :style="`animation-delay:0s;top:40vw;color:red;`">
                {{ myWish }}
            </div>
        </div>
        <div id="main2"></div>
    </main>
</template>
<script>
import html2canvas from '../../utils/html2canvas';
//import html2canvas from "html2canvas";
import { sendBar,getBarrage } from '../../api/api'
import Cookies from 'js-cookie';
export default {
    name: 'Comment',
    mounted() {
        this.preWishes.sort(() => {
            return Math.random() > .5 ? -1 : 1;
        })
        getBarrage().then((res) => {
            console.log(res.data.detail);
            let len = res.data.detail.length;
            len = len <= 20 ? len : 20;  //len最大取10
            res.data.detail.forEach((val) => {
                this.fakeWishes.push(val);
            })
            this.fakeWishes = this.fakeWishes.map((item) => {
                return {
                    value: item,
                    delay: Math.random() * 6,
                    top: Math.random() * 80
                }
            })
        })
    },
    data() {
        return {
            help:1,
            type: 1, //1是自定义祝福，2是快捷祝福，type=3的时候要显示的是分享
            input: '', //自定义祝福的输入
            preWishes: ['祝母校越来越好!', '天大加油!', '我爱天大'], //快捷祝福
            fakeWishes: ['祝母校越来越好!', '爱你天大', '聚是一团火'], //弹幕存放位置
            myWish: '',
            imgUrl: '',
            showFirst: true,
        }
    },
    methods: {
        sleep(delay) {
            return new Promise((resolve) => setTimeout(resolve, delay));
        },
        getCapture() { //在分享前获取当前截图
            //let container = document.querySelector('#mapbox')
            this.showFirst = false;
            const width = Cookies.get('con_width');
            const height = Cookies.get('con_height');
            const scale = window.devicePixelRatio*4;
            const ops = {
                scale,
                useCORS: true,
                allowTaint: true,
                width,
                height,
            };
            //this.$parent.drawUserLine();
            //await this.sleep(200);
            let popup = document.querySelector('.mapboxgl-popup-content');
            popup.style.display = 'none';
            console.log(ops);
            (window.html2canvas || html2canvas(document.body, ops)).then(canvas => {  //生成一张截图
                let width = Cookies.get('con_width'); 
                let height = Cookies.get('con_height') * 0.3;
                console.log(width + ' ' + height);
                canvas.style.width = `${height}px`;
                canvas.style.height = `${width}px`;
                canvas.style.position = 'relative';
                let offset = width/2 - height/2;
                console.log(offset);
                canvas.style.transform = 'rotate(-180deg) translate(' + offset + 'px, 0)';
                //box.appendChild(canvas);
                let box = document.querySelector('#main2');
                //console.log(box);
                box.appendChild(canvas);
            });
        },
        async toShare() {
            await this.getCapture(); //异步函数中使用await等待getCapture执行完毕后再执行当前函数
            this.$router.push({
                name: 'share',
                params: {
                    img: this.imgUrl,
                    grade: this.$route.params.grade,
                    locationName: this.$route.params.name
                }
            })
        },
        postComment(input) {
            console.log(input)
            this.myWish = input
            this.type = 3 //发完一条直接显示分享按钮，限制每个人只能发一条弹幕
            sendBar({text: input}).then((res) => {
                console.log(res);
            })
        },
        changeType() {
            if (this.type === 1) {
                this.type = 2
            } else {
                this.type = 1
            }
        }
    }
}
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
    width: 100%;
}
#main {
    z-index: 100;
    //height: 100% !important;
    //width: 100%;
    pointer-events: none; //保证缩放可以穿透地图
    background-color: transparent;
    transform-origin: top left;
    transform: rotate(90deg) translate(0, -100%);
}

.input-div {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: justify-content;
    /*width: 100vh;*/
    padding: 20px 20px 20px 80px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    align-items: center;
    //right: 0px;
    pointer-events: all;
}

.fast {
    background-color: cornflowerblue;
    border-radius: 50%;
    width: 8vw;
    height: 8vw;
    display: flex;
    flex-direction: column;
    padding: 4px;

    > div {
        height: 50%;
        font-size: 3.5vw;
        transform: scale(0.8);
        color: white;
        white-space: nowrap;
        //font-weight: bold;
    }
}

.my-input {
    border-radius: 6px;
    opacity: 0.6;
    font-size: 4.0vw;
    margin: 4px;
    height: 8vw;
    border: 2px solid cornflowerblue;
}

.submit {
    border-radius: 6px;
    background-color: #004D80;
    width: 20vh;
    height: 8vw;
    font-size: 4vw;
    line-height: 8vw;
    color: white;
    //font-weight: bold;
    margin: auto 4px;
}
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px
}
.next-stage {
    position: absolute;
    bottom: 4px;
    left: 50%;
    border-radius: 6px;
    background-color: #004D80;
    width: 15vh;
    height: 8vw;
    font-size: 4vw;
    line-height: 8vw;
    color: white;
    //font-weight: bold;
    margin: auto 4px;
    pointer-events: all;
    margin: 0px 0px 20px 150px;
    transform: translate(-50%, 0);
}

.fast-container {
    display: flex;
    width: 100%;
    height: 30px;

    .wish-item {
        background-color: #fff;
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 5px;
        margin-left: 12px;
        margin-top: 4px;
        height: 8vw;
        line-height: 8vw;
        font-size: 3.5vw;
        text-align: center;
        color: black;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        align-self: center;
    }
}
.single-fly {
    z-index: 1000;
    position: absolute;
    width: 180px;
    height: 20px;
    opacity: 0.8;
    font-size: 2.5vw;
    transform: translateX(1400px);
    animation: scrollTo linear 12s infinite;
}

@keyframes scrollTo {
    from {
        transform: translateX(1400px);
    }
    to {
        transform: translateX(-400px);
    }
}

</style>
